<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script th:src="@{/static/js/jQuery3.7.1.js}"></script>
</head>
<body>
<div class="title">
    <table>
        <tr>
            <td>
                <span>用户名：</span>
            </td>
            <td>
                <input type="text" class="input_text" id="username"/>
            </td>
        </tr>
        <tr>
            <td>
                <span>密码：</span>
            </td>
            <td>
                <input type="password" class="input_text" id="password"/>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="登录" class="submitBtn" id="sub"/>
                <div id="sys-lang" style="display:inline-block;float: right;margin-top: 10px;">
                    <select id="select-language">
                        <option value="zh_CN">中文</option>
                        <option value="en_US">English</option>
                    </select>
                    <img class="checkDongle" src="../static/img/icon_country_cn.gif">
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    $(function () {
        $("#sub").click(function (){
            let username = $("#username"),password = $("#password");
            $.ajax({
                url:"/demo/user/doLogin",
                type:"POST",
                data:{
                    username: username.val(),
                    password: password.val()
                },
                success:function(data){
                    if(data.errCode===0) {
                        window.location.href = '/demo/page/scan';
                    } else {
                        alert("登录失败："+data.errMsg);
                    }
                }
            });
        });
    });
</script>
<style>
    span{
        float: left;
        text-align: right;
    }
    .title{
        /*position: absolute;*/
        margin: 180px auto;
        /*border: 1px solid pink;*/
        width: 360px;
        /*right: 120px;*/
        font-weight: bold;
        border-radius: 5px;
        padding: 30px 45px;
    }
    .input_text {
        width: 140px;
        height: 22px;
        line-height: 22px;
        border: 1px solid #a5c3e0;
        border-top: 1px solid #89accd;
        border-right: 1px solid #89accd;
        padding: 0 3px;
        border-radius: 3px;
        box-shadow: 1px 2px 2px #e5eaee inset;
        font-size: 12px;
        /*margin-left: 90px;*/
    }
    .submitBtn{
        margin-top: 10px;
        background-color: #2283C5 !important;
        border: 4px solid #2283C5;
        color: #FFFFFF !important;
        border-radius: 3px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
        transition: all 0.15s ease 0s;
        vertical-align: middle;
        cursor: pointer;
    }
    .submitBtn:hover{
        background-color: #045E9F !important;
        border: 4px solid #045E9F;
    }
    .submitBtn:active{
        left:1px;
        top:1px;
    }
    #sys-lang img {
        display: inline-block;
        height: 22px;
        vertical-align: middle;
        margin-bottom: 3px;
    }
    img {
        border: 0px;
    }
</style>
</html>